<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞行模式定时器</title>
    <style>
        :root {
            --primary: #6750A4;
            --on-primary: #FFFFFF;
            --primary-container: #EADDFF;
            --on-primary-container: #21005D;
            --secondary: #625B71;
            --on-secondary: #FFFFFF;
            --secondary-container: #E8DEF8;
            --on-secondary-container: #1D192B;
            --tertiary: #7D5260;
            --on-tertiary: #FFFFFF;
            --tertiary-container: #FFD8E4;
            --on-tertiary-container: #31111D;
            --error: #B3261E;
            --on-error: #FFFFFF;
            --error-container: #F9DEDC;
            --on-error-container: #410E0B;
            --background: #FFFBFE;
            --on-background: #1C1B1F;
            --surface: #FFFBFE;
            --on-surface: #1C1B1F;
            --surface-variant: #E7E0EC;
            --on-surface-variant: #49454F;
            --outline: #79747E;
            --shadow: #000000;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --primary: #D0BCFF;
                --on-primary: #381E72;
                --primary-container: #4F378B;
                --on-primary-container: #EADDFF;
                --secondary: #CCC2DC;
                --on-secondary: #332D41;
                --secondary-container: #4A4458;
                --on-secondary-container: #E8DEF8;
                --tertiary: #EFB8C8;
                --on-tertiary: #492532;
                --tertiary-container: #633B48;
                --on-tertiary-container: #FFD8E4;
                --error: #F2B8B5;
                --on-error: #601410;
                --error-container: #8C1D18;
                --on-error-container: #F9DEDC;
                --background: #1C1B1F;
                --on-background: #E6E1E5;
                --surface: #1C1B1F;
                --on-surface: #E6E1E5;
                --surface-variant: #49454F;
                --on-surface-variant: #CAC4D0;
                --outline: #938F99;
                --shadow: #000000;
            }
        }

        body {
            font-family: 'Roboto', system-ui, -apple-system, sans-serif;
            background-color: var(--background);
            color: var(--on-background);
            margin: 0;
            padding: 16px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .container {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 16px;
        }

        .phone-mockup {
            width: 360px;
            height: 640px;
            background-color: var(--surface);
            border-radius: 28px;
            padding: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
            flex-shrink: 0;
        }

        .card {
            background-color: var(--surface);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
        }

        .elevated-card {
            background-color: var(--surface);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
        }

        .filled-card {
            background-color: var(--surface-variant);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
        }

        .title {
            font-size: 22px;
            font-weight: 500;
            line-height: 28px;
            color: var(--on-surface);
            margin: 0 0 16px 0;
        }

        .headline {
            font-size: 18px;
            font-weight: 500;
            line-height: 24px;
            color: var(--on-surface);
            margin: 0 0 12px 0;
        }

        .body {
            font-size: 14px;
            line-height: 20px;
            color: var(--on-surface-variant);
            margin: 0;
        }

        .label {
            font-size: 12px;
            font-weight: 500;
            line-height: 16px;
            color: var(--on-surface-variant);
            margin-bottom: 4px;
        }

        .button {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            padding: 0 24px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.1px;
            text-transform: uppercase;
            cursor: pointer;
            border: none;
            outline: none;
            transition: all 0.2s;
        }

        .primary-button {
            background-color: var(--primary);
            color: var(--on-primary);
        }

        .primary-button:hover {
            box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
        }

        .secondary-button {
            background-color: var(--secondary-container);
            color: var(--on-secondary-container);
        }

        .text-button {
            color: var(--primary);
            background-color: transparent;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            height: 32px;
            padding: 0 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            background-color: var(--surface-variant);
            color: var(--on-surface-variant);
            margin-right: 8px;
            margin-bottom: 8px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 42px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--surface-variant);
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: var(--on-surface-variant);
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: var(--primary);
        }

        input:checked + .slider:before {
            transform: translateX(18px);
        }

        .text-field {
            width: 100%;
            padding: 12px 16px;
            border-radius: 4px;
            border: 1px solid var(--outline);
            background-color: var(--surface);
            color: var(--on-surface);
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 16px;
        }

        .text-field:focus {
            border-color: var(--primary);
            outline: none;
        }

        .icon {
            width: 24px;
            height: 24px;
            color: var(--on-surface-variant);
        }

        .status-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-on {
            background-color: var(--primary-container);
            color: var(--on-primary-container);
        }

        .status-off {
            background-color: var(--error-container);
            color: var(--on-error-container);
        }

        .divider {
            height: 1px;
            background-color: var(--outline);
            opacity: 0.12;
            margin: 8px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 主界面 -->
        <div class="phone-mockup">
            <h1 class="title">飞行模式定时器</h1>
            
            <div class="elevated-card">
                <div class="headline">当前状态</div>
                <div class="flex items-center justify-between">
                    <span class="body">飞行模式</span>
                    <label class="switch">
                        <input type="checkbox">
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
            
            <div class="filled-card">
                <h2 class="headline">定时任务</h2>
                <div class="divider"></div>
                
                <div class="elevated-card">
                    <div class="flex justify-between items-center">
                        <div>
                            <div class="body" style="font-weight: 500;">工作日夜间</div>
                            <div class="body">每天 23:00 开启 - 07:00 关闭</div>
                        </div>
                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-8"></path>
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                        </svg>
                    </div>
                </div>
                
                <div class="elevated-card">
                    <div class="flex justify-between items-center">
                        <div>
                            <div class="body" style="font-weight: 500;">会议时间</div>
                            <div class="body">每周三 14:00 开启 - 15:30 关闭</div>
                        </div>
                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-8"></path>
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            
            <button class="primary-button" style="margin-top: 16px; width: 100%;">
                <svg style="width: 20px; height: 20px; margin-right: 8px;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
                添加定时
            </button>
        </div>
        
        <!-- 添加定时任务界面 -->
        <div class="phone-mockup">
            <div style="display: flex; align-items: center; margin-bottom: 24px;">
                <svg class="icon" style="margin-right: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M19 12H5M12 19l-7-7 7-7"></path>
                </svg>
                <h1 class="title">新建定时</h1>
            </div>
            
            <div class="elevated-card">
                <label class="label">任务名称</label>
                <input type="text" class="text-field" placeholder="例如：睡眠时间">
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                    <div>
                        <label class="label">开启时间</label>
                        <input type="time" class="text-field">
                    </div>
                    <div>
                        <label class="label">关闭时间</label>
                        <input type="time" class="text-field">
                    </div>
                </div>
                
                <label class="label">重复</label>
                <div style="display: flex; flex-wrap: wrap;">
                    <div class="chip">仅一次</div>
                    <div class="chip">每天</div>
                    <div class="chip">工作日</div>
                    <div class="chip">周末</div>
                    <div class="chip">自定义...</div>
                </div>
            </div>
            
            <button class="primary-button" style="margin-top: 16px; width: 100%;">
                保存定时
            </button>
        </div>
    </div>
</body>
</html>